<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: rollover and mouseover</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var stage,text;
	
	function init() {
		// create a stage object to work with the canvas. This is the top level node in the display list:
		stage = new createjs.Stage("testCanvas");
		stage.name = "stage";
		stage.enableMouseOver(20);

		// Create a simple hierarchy:
		var container = stage.addChild(new createjs.Container()).set({name:"container"});
		
		var blue = container.addChild(new createjs.Shape()).set({name:"blue", x:50, y:50});
		blue.graphics.beginFill("#00F").drawRect(0,0,200,200);
		var red = container.addChild(new createjs.Shape()).set({name:"red", x:100, y:100});
		red.graphics.beginFill("#F00").drawRect(0,0,100,100);
		
		container.addEventListener("mouseover", handleEvt);
		container.addEventListener("mouseout", handleEvt);
		container.addEventListener("rollover", handleEvt);
		container.addEventListener("rollout", handleEvt);
		
		container.cursor = "pointer";
		red.cursor = "";
		
		// text object to output the 
		text = stage.addChild(new createjs.Text("", "14px monospace", "#FFF")).set({x:260, y:20, lineHeight:20});

		// call update on the stage to make it render the current display list to the canvas:
		createjs.Ticker.addEventListener("tick", stage);
	}
	
	var log = [];
	function handleEvt(evt) {
		log.push("type="+evt.type+" target="+evt.target.name+" currentTarget="+evt.currentTarget.name);
		while (log.length > 12) { log.shift(); }
		text.text = log.join("\n");
	}
	</script>
</head>
	
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> rollover and mouseover</h1>
	    <p>This example demonstrates the difference between rollover/out and mouseover/out events. The red and blue squares
	    are separate Shape instances within a parent Container. The Container has both rollover/rollout and
	    mouseover/mouseout events.</p>
	    <p>
		Note how the mouseover/mouseout events are triggered whenever you move between different display objects
		(ex. moving from the blue to red shape), but the rollover/rollout events are only triggered when you leave the
		Container's aggregate contents.
	    </p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>
